<template>
  <div>
    <Slotc :data="list1">
      <template v-slot:header>
        <ul>
          <li v-for="item in list1" :key="item">
            {{ item }}======={{ item }}
            <button @click="del(item)">删除</button>
          </li>
        </ul>
        <div><button @click="add">增加</button></div>
      </template>
    </Slotc>
    <Slotc :data="list2">
      <template v-slot:header>
        <ul>
          <li v-for="(item, index) in list2" :key="item">
            {{ item }}======={{ item }}
            <button @click="del2(index)">删除</button>
          </li>
        </ul>
      </template>
    </Slotc>
  </div>
</template>
<script>
import Slotc from "./06zuoye/Slot.vue/Slot.vue";
export default {
  components: {
    Slotc,
  },
  data() {
    return {
      list1: [1, 2, 3, 4, 5],
      list2: ["a", "b", "c", "d", "e"],
    };
  },
  created() {},
  computed: {},
  methods: {
    add() {
      this.list1.push(Date.now());
    },
    del(id) {
      this.list1 = this.list1.filter((item) => item !== id);
    },
    del2(index) {
      this.list2.splice(index, 1);
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
